<template>
<div style="width:800px;font-family: Source Han Sans;" class="rounded-lg ">
 <div  class="flex flex-col justify-center" id="custom-modal-container">
  <div v-if="!visibleD" class="p-2">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange" tabPosition="top" class="no-bar">
      <a-tab-pane key="1">
        <template #tab>
          <span>
            <apple-outlined />
            所有课程
          </span>
        </template>
        
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <span>
            <android-outlined />
            已购课程
          </span>
        </template>
      
      </a-tab-pane>

      <a-tab-pane key="3">
        <template #tab>
          <span>
            <android-outlined />
            即将上架
          </span>
        </template>
      
      </a-tab-pane>
    </a-tabs>
  
 
    <a-list item-layout="vertical" :loading="loading" size="small" :pagination="false" :grid="{ gutter: 1,  column:3}" :data-source="listData">
      <template #loadMore>
              <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <a-spin v-if="!pagination.ismore" />
                <a-button v-else @click="loadMore">加载更多</a-button>
              </div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item key="item.kctitle">
            <div class="flex flex-col justify-center items-center" style="border-radius: 15px;">
            <div class="image-container" style="border-radius:15px;">
              <img
              style="object-fit: cover;border-radius:15px;border:1px solid #e5e5e5"
              class="cursor-pointer"
              :src="'/js'+item.kcimg"
              @click="showkc(item)"
            />
            </div>
            <div class="w-full flex flex-col p-2">
              <span class="w-full font-lg truncate mt-1 font-bold cursor-pointer"  @click="showkc(item)">{{item.kctitle}}</span>
              <div class="w-full text-xs text-gray-400 text-ellipsis mt-1" >{{item.kcjianjie}}</div>
              <div class="flex justify-between mt-2 items-center w-full">
                <span class="flex flex-1 text-red-500 font-bold">￥{{item.price}}</span>
                <div class=" flex " v-if="item.ukccode==null || item.status=='2'">
                  <a-button  v-if="activeKey==1" block="true" type="primary" size="middle" @click="addcart(item)" alt="加入购物车">
                    <ShoppingCartOutlined />加入购物车
                  </a-button>
                </div>
                <div v-if="item.ukccode" style="color:#aaa">已购买</div>
              </div>
            </div>
          </div>
        </a-list-item>
        
      </template>
      <a-divider v-if="!pagination.ismore">没有更多数据</a-divider>
        
    </a-list>
  </div>
  <div v-if="visibleD" class="w-full h-full">
           <KcDetail :detailkc="kcobj" @closeDetail="closeDetail"/>
      </div>
 
  </div>

  <!--订单页面抽屉-->
    <a-drawer
    title="订单"
    placement="right"
    width="40%"
    :closable="true"
    :maskClosable="false"
    v-model:visible="visibleDO"
    :after-visible-change="afterVisibleChange">
    <OrdercrateAndPay ref="orderRef" 
      :ordertype="ordertype" 
      :orderItems="orderdetailArray" 
      :status="status" 
       @changeorderstatus="changeorderstatus" 
       @orderpaysuccess="orderpaysuccess"/>
  </a-drawer>
  </div>
</template>
<script lang="ts">
import { StarOutlined, LikeOutlined, MessageOutlined ,ShoppingCartOutlined} from '@ant-design/icons-vue';
import { ref,defineComponent,onMounted } from 'vue';
import { Tabs,List,Drawer,Divider,ListItem } from 'ant-design-vue';
import { kclistapi,addusercart } from '/@/api/dp/dpbaseapi';
import { useUserStore } from '/@/store/modules/user';
import KcDetail from '/@/views/dp/kecheng/frontdetail.vue';
import OrdercrateAndPay from '/@/views/dp/userorder/ordercreate.vue';
import { useMessage } from '/@/hooks/web/useMessage';
const { showMessage } = useMessage();
export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    ATabs:Tabs,
    AList:List,
    AListItem:ListItem,
    ADrawer:Drawer,
    ADivider:Divider
  },
})
</script>

<script lang="ts" setup>  
   defineExpose({reloadKclist});
   const activeKey=ref('1');
   const listData=ref([]);
   const pagination = ref({
      pageSize: 9,
      pageNo:1,
      count: 0,
      ismore:false,
    });
    const userStore = useUserStore();
    const loading=ref(true);
    const visibleD = ref<boolean>(false);
    const kcobj=ref({});

    function reloadKclist(){
      tabChange('1')
    }

    onMounted(()=>{
      reloadKclist();
    });

    function tabChange(e) {
      activeKey.value=e;
      pagination.value={
          pageSize: 9,
          pageNo:1,
          count: 0,
          ismore:false,
      };
      listData.value=[];
      getKclist();
    }

    //订单
    const visibleDO = ref<boolean>(false);
    async function getKclist(){
      loading.value=true;
      const res=  await kclistapi({activeKey:activeKey.value});
      listData.value = [...listData.value, ...res.list]; 
      loading.value=false;
      pagination.value.pageNo=res.pageNo;
      pagination.value.pageSize=res.pageSize;
      pagination.value.count=res.count;
      pagination.value.ismore=res.list.length<pagination.value.pageSize?false:true;
    }

    function closeDetail(){
      visibleD.value=false;
    }

    function loadMore(){
      pagination.value.pageNo=pagination.value.pageNo+1;
      getKclist();
    }
    function showkc(obj){
      visibleD.value=true;
      kcobj.value=obj;
    }
    async function addcart(obj){
       var cartobj={
           kcid:obj.id,
           cartnum:1
       }
       try {
          const res=await addusercart(cartobj);
          if(res.result=='true'){
            showMessage('已加入购物车');
            userStore.setCartList();
          }else{
            
          }
       } catch(err) {

       }
    }
</script>

<style scoped>
.text-ellipsis {
  height: 2.6em; /* 设置高度为固定的行高的两倍 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在两行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 添加省略号 */
}

.image-container {
  position: relative;
  width: 100%; /* 或者你想要的宽度 */
  padding-bottom: 60%; /* 设置padding-bottom为100%，使得容器有相对的高度 */
}
 
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 图片宽度占满容器宽度 */
  height: 100%; /* 图片高度占满容器高度 */
}

.no-bar .ant-tabs-ink-bar {
  display: none;
}
</style>